<template>
  <view class="sigin">
    <view class="siginHeader">
      <view class="siginHeader-main">
        <view class="flex flex-bt flex-align">
          <view class="left">
            <view class="title">本月累计签到</view>
            <view class="num"><text>{{days}}</text>天</view>
          </view>
          <view class="right">
            <view class="title">观看直播时长</view>
            <view class="num"><text>24</text>时<text>05</text>分<text>11</text>秒</view>
          </view>
        </view>
        <view class="tishi">{{isSign?'您今日已完成签到':'您今日还未进行签到，快去观看直播吧！'}}</view>
      </view>
    </view>
    <view class="bgOrange">
      <view class="zhuang">
        <image src="@/static/sigin/sigin10.png" mode="scaleToFill" style="top: 14rpx;left: 60rpx;" />
        <image src="@/static/sigin/sigin10.png" mode="scaleToFill" style="top: 14rpx;right: 60rpx;" />
      </view>
      <view class="siginRili">
        <view class="siginRili-title flex flex-align flex-center">
          <!-- <uni-icons type="left" size="20" color="#333"></uni-icons> -->
          <view class="homeTitle"><text>{{currentYear}}年 {{currentMonth}}月</text></view>
          <!-- <uni-icons type="right" size="20" color="#333"></uni-icons> -->
        </view>
        <view class="sigin-list flex flex-line " :class="{'active':iszhan}">
          <view  class="sigin-item" v-for="(item,index) in dataTime" :key="index" >
            <view class="sigin-item-wh flex-direction flex flex-center flex-align" :class="{'sigin-item-active':item.is_today}">
              <view class="img">
                <image src="@/static/sigin/sigin05.png" v-if="item.clock_in==false&&!item.is_today"  mode="scaleToFill" />
                <image src="@/static/sigin/sigin06.png" v-if="item.clock_in==false&&item.is_today"  mode="scaleToFill" />
                <image src="@/static/sigin/sigin09.png" v-if="item.clock_in==true&&item.is_today"  mode="scaleToFill" />
                <image src="@/static/sigin/sigin07.png" v-if="item.clock_in==true&&!item.is_today"  mode="scaleToFill" />
              </view>
              <view class="wenzi">{{item.is_today?'今':item.day}}日</view>
            </view>
          </view>
        </view>
        <view class="flex flex-align flex-center">
          <view class="flex flex-align zhankai" @click="getZhan">
            <image :src="iszhan?'/static/sigin/sigin11.png':'/static/sigin/sigin08.png'" mode="scaleToFill" />
            <view>{{iszhan?'收起':'展开'}}</view>
          </view>
        </view>
        <view class="goLive" @click="menuJump({is_tab: false,link: '/pages/live/liveList',link_type: 1})">去看直播</view>
      </view>
    </view>
    <view class="guize">
      <view class="flex flex-align flex-center">
        <view class="homeTitle"><text>活动规则</text></view>
      </view>
      <view class="list">
        1、直播间送豪礼啦，双十一期间的所有商品全部半价处理，数量有限，先到先得，快来抢购吧
      </view>
      <view class="list">
        2、直播间送豪礼啦，双十一期间的所有商品全部半价处理，数量有限，先到先得，快来抢购吧
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { signInfo } from '@/api/user'
import { menuJump } from '@/utils/tools'
import { onLoad } from '@dcloudio/uni-app'
import { reactive, ref } from 'vue'
const iszhan = ref(false)
const getZhan = () => {
  iszhan.value = !iszhan.value
}
// 天数
const days = ref(0)
const currentYear = ref<number>(0)
const currentMonth = ref<number>(0)
const dataTime = ref<Recordable>([])
onLoad(()=>{
  getSign()
  getCurrentYearMonth()
})
const isSign = ref(false)
  // 获取签到信息
function getSign() {
  signInfo().then((res: any) => {
    if (res) {
      // 数组倒序排列
      dataTime.value = res.clock_in_list.reverse()
      console.log(dataTime.value)
      days.value = res.max_clock_in
      res.clock_in_list.forEach((item:any)=>{
        if ( item.is_today) {
          isSign.value = item.clock_in
        }
       
      })
    }
  })
}
// 获取当前年月
function getCurrentYearMonth() {
  const date = new Date()
  currentYear.value = date.getFullYear()
  currentMonth.value = date.getMonth() + 1
}
</script>

<style scoped lang="scss">
page{background:#FFCFB1;}
.sigin{padding-bottom: 20rpx;
  .siginHeader{background-image: url('@/static/sigin/sigin01.png');background-repeat: no-repeat;background-size: 100% 100%;width: 100%;height:500rpx ;
    box-sizing: border-box;padding:300rpx 30rpx 0;
   .siginHeader-main{
    background: url('@/static/sigin/sigin02.png');background-repeat: no-repeat;background-size: 100% 100%;width: 100%;padding: 60rpx 0 30rpx;box-sizing: border-box;
    .flex{
      display: flex;text-align:center;
      .left{
        width: 45%;
        .title{color: #323233;font-size: 26rpx;}
        .num{color: #FE7431;font-size: 24rpx;font-weight: 600;
          text{margin: 0 10rpx;font-size: 46rpx;}
        }
      }
      .right{
        width: 55%;
       .title{color: #323233;font-size: 26rpx;}
       .num{color: #FE7431;font-size: 24rpx;font-weight: 600;
        text{margin: 0 10rpx;font-size: 46rpx;}
        }
      }
    }
    .tishi{
    color: #323233;font-size: 26rpx;margin-top: 30rpx;background: #FFEDE3;text-align: center;padding: 20rpx 0;border-radius: 10rpx;width: 600rpx;margin: 30rpx auto;
      border-radius: 60rpx;color: #FE7431;

    }
   }
  }
}
.bgOrange{background: #FE9640;border-radius: 30rpx;padding: 30rpx 4rpx 4rpx 4rpx;margin: 150rpx 30rpx 0;position: relative;
  .zhuang{
    image{position: absolute;width: 52rpx;height: 36rpx;}
  }
}
.siginRili{min-height:686rpx;padding-bottom: 50rpx;background: #fff;border-radius: 30rpx;box-shadow: inset 0 0 16px rgba($color: #FE9640, $alpha: .5);
  .siginRili-title{padding: 50rpx 30rpx 0;
    .homeTitle{width: 170rpx;margin: -5rpx 20rpx 0;}
    .homeTitle::after{width: 170rpx;}
  }
  .sigin-list{padding:0 6rpx 0 10rpx;margin-top:20rpx;box-sizing: border-box;height:378rpx;overflow: hidden;
    .sigin-item{width: 16.6%;
      .sigin-item-wh{
        width: 96rpx;height: 126rpx;text-align: center;
      }
      .img{width: 64rpx;height: 64rpx;background: url('@/static/sigin/sigin04.png') no-repeat;background-size: 100% 100%;}
      image{width: 64rpx;height: 64rpx;}
     .wenzi{color: #969799;font-size: 24rpx;}
     .sigin-item-wh.sigin-item-active{background: linear-gradient(to right,#FE9640,#FE7431);border-radius: 20rpx;
      .wenzi{color: #fff; }
    }
    }
  }
  .zhankai{margin-top: 30rpx;
    image{width: 48rpx;height: 48rpx;margin-right: 6rpx;}
  }
  .sigin-list.active{height:auto;overflow: auto;}
  .goLive{width: 620rpx;height:88rpx;background: linear-gradient(to right,#FE9640,#FE7431);border-radius: 88rpx;color: #fff;font-size: 26rpx;text-align: center;line-height: 88rpx;
    margin:20rpx auto 0;}
  }
.guize{background: #fff;margin: 30rpx;padding: 30rpx;border-radius: 20rpx;box-shadow: inset 0 0 24px rgba($color: #FE9640, $alpha: .5);border: 2px solid #fff;
  .list{color: #646566;font-size: 28rpx;padding-bottom: 20rpx;}
}
</style>